<template>
  <el-container id="app">
    <el-header>
      <el-row :gutter="10">
        <el-col :span="8" class="header-font header-font-name">
          <span style="font-size: 80px">邬</span>
          <span><sub>魉</sub></span>
        </el-col>
        <el-col :span="8" class="header-font header-font-title">工作日记</el-col>
      </el-row>
    </el-header>
    <el-main class="container-main">
      <el-row :gutter="10">
        <el-col :span="6">
          <div id="classification" style="width: 250px;height: 250px;"></div>
        </el-col>
        <el-col :span="6" :offset="12">
          <div id="liveDW"></div>
        </el-col>
      </el-row>
      <div class="row-line"/>
      <el-row>
        <el-col>
          <el-table
            :data="articleList"
            :stripe="true"
            height="400"
            style="width: 100%">
            <el-table-column label="标题" align="center">
              <template slot-scope="scope">
                <el-link type="text" @click="openDialog(scope.row.articleContent)">{{scope.row.articleTitle}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column label="发布日期" align="center">
              <template slot-scope="scope">
                {{formatDate(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column label="标签" align="center">
              <template slot-scope="scope">
                <div slot="reference">
                  <el-row :gutter="10">

                    <el-col :span="3">
                      <!--                    <el-col v-for="(label, index) in scope.row.label" :key="index" :span="3">-->
                      <el-tag>{{classifies[scope.row.classificationId].classificationName}}</el-tag>
                    </el-col>
                  </el-row>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="text-align: center;">
      <span class="footer-font">辽ICP备20007888号</span>
    </el-footer>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-container>
        <el-main class="container-main" style="height: 500px">
          <div v-html="articleContent"/>
        </el-main>
      </el-container>
    </el-dialog>
  </el-container>
</template>

<script>

  export default {
    name: 'App',
    components: {},
    data() {
      return {
        dialogVisible: false,
        articleContent: '',
        articleList: [],
        pieDataList: [],
        classifies: {}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initCharts();
        this.initClassify();
        this.initTable();
        this.initLive2DW()
      })
    },
    methods: {
      initCharts() {
        let that = this;
        let classification = this.$echarts.init(document.getElementById('classification'), {
          renderer: 'svg'
        });
        this.$axios.get('/blogApi/article/getClassifyCount').then(res => {
          let resData = res.data;
          if (resData && resData.returnCode === 200) {
            let pieDataList = [];
            pieDataList.push({
              value: resData.value.classificationCount,
              name: resData.value.classificationName,
              itemStyle: {
                type: 'radial',
                color: that.randomColor(),
                x: 0.5,
                y: 0.5,
                r: 0.5,
                global: false // 缺省为 false
              }
            })
            classification.setOption({
              title: {
                text: '文章分类\n',
                textAlign: '',
                padding: 10,
                textStyle: {
                  fontStyle: 'italic'
                }
              },
              series: [
                {
                  type: 'pie',
                  roseType: 'angle',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center',
                    formatter: '{b}: \n{c}篇'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '15',
                      fontWeight: 'bold',
                      fontcolor: 'black'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: pieDataList
                }
              ]
            })
          }
        })
      },
      initClassify() {
        let that = this
        this.$axios.get('/blogApi/classification/listAll').then(res => {
          let resData = res.data;
          if (resData && resData.returnCode === 200) {
            for (let classify of resData.value) {
              that.classifies[classify.id] = classify
            }
          }
        })
      },
      initTable() {
        let that = this;
        that.$axios('/blogApi/article/listAll').then(res => {
          let resData = res.data;
          if (resData && resData.returnCode === 200) {
            that.articleList = (resData.value)
          }
        })
      },
      initLive2DW() {
      },
      openDialog(url) {
        let that = this;
        that.articleContent = url;
        that.dialogVisible = true;
      },
      randomColor() {
        let r, g, b;
        r = Math.floor(Math.random() * 256);
        g = Math.floor(Math.random() * 256);
        b = Math.floor(Math.random() * 256);
        return "rgb(" + r + ',' + g + ',' + b + ")";
      },
      formatDate(dateOfString) {
        let timestamp = new Date(dateOfString)
        return timestamp.getUTCFullYear() + '年' + (timestamp.getUTCMonth() + 1) + '月' + timestamp.getUTCDate() + '日';
      }
    }
  }
</script>

<style>

  html, body {
    min-height: 100%;
    height: 100%;
    margin: unset;
  }

  /*
    ::-webkit-scrollbar {
      width: 0 !important;
    }

    ::-webkit-scrollbar {
      width: 0 !important;
      height: 0;
    }
  */

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background-image: linear-gradient(to bottom, white, #f8a2ff);
    height: 100%;
    min-height: 100%;
  }

  .header-font {
    font-size: 35px;
    font-family: 'Adobe 宋体 Std L', cursive;
    text-align: left
  }

  .header-font-title {
    text-align: center;
  }

  .header-font-name {

  }

  .container-main {
    margin-top: 20px;
  }

  .container-main::-webkit-scrollbar, .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }

  .container-main::-webkit-scrollbar-thumb, .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #c75cff;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }

  .row-line {
    margin: 100px 0;
  }

  .footer-font {
    text-align: center;
    font-size: smaller;
    color: black;
    line-height: initial;
    margin: 40% 0;
  }
</style>
